/* ================================= */
/* CSS for control sap.m/TimePicker  */
/* Base theme                        */
/* ================================= */

/* ======================================== */
/* TimePicker Input Field                   */
/* ======================================== */

.sapMTimePicker {
	.sapUiIcon {
		cursor: pointer;
		color: @sapUiContentIconColor;
		&:hover {
			background-color: @sapUiButtonLiteHoverBackground;
		}
		&:focus {
			background-color: @sapUiButtonLiteHoverBackground;
			outline: 1px dotted @sapUiContentFocusColor;
			outline-offset: -1px;
		}
		&:active {
			background-color: @sapUiButtonLiteActiveBackground;
			color: @sapUiButtonActiveTextColor;
			outline: 1px dotted @sapUiContentContrastFocusColor;
		}
	}
	&.sapMTPInputActive {
		.sapMInputBaseInner {
			border: 1px solid @sapUiFieldActiveBorderColor;
		}
		.sapUiIcon {
			background-color: @sapUiToggleButtonPressedBackground;
			color: @sapUiToggleButtonPressedTextColor;
			&:hover {
				background-color: @sapUiToggleButtonPressedBackground;
				color: @sapUiToggleButtonPressedTextColor;
			}
			&:focus {
				background-color: @sapUiButtonLiteActiveBackground;
			}
		}
	}
}


.sapMTimePicker .sapMInputVH:not(.sapMInputBaseReadonly) .sapMInputValHelp > .sapMInputValHelpInner:hover,
.sapMTimePicker .sapMInputVH:not(.sapMInputBaseReadonly) .sapMInputValHelp > .sapMInputValHelpInner:focus {
	background-color: @sapUiToggleButtonPressedBackground;
}

.TPSliderItemHidden {
	display: none;
}

/* ======================================== */
/* TimePicker Dropdown                      */
/* ======================================== */

.sapMTimePickerDropDown {
	overflow: hidden !important;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
	border-radius: 0 0 0.25rem 0.25rem !important; //Need to override this with important because of popover stronger selectors
	box-shadow: @sapUiShadowLevel1 !important; //Need to override this with important because of popover stronger selectors
	.sapMTimePickerContainer {
		height: 100%;
		min-width: 20rem;
		box-sizing: border-box;
		padding: 1rem;
		text-align: center;
		&:before {
			content: '';
			display: inline-block;
			height: 100%;
			vertical-align: middle;
		}
		.sapMTimePickerContainerLabel {
			display: none;
			box-sizing: border-box;
		}
		.sapMTPColumn {
			display: inline-block;
			overflow: hidden;
			height: 3rem;
			vertical-align: middle;
			text-align: center;
			box-sizing: border-box;
			cursor: pointer;
			.sapMTimePickerLabel {
				display: none;
				box-sizing: border-box;
				height: 2rem;
				line-height: 2rem;
				width: 4.5rem;
				text-align: center;
			}
			.sapMTimePickerItemArrows {
				display: none;
				box-sizing: border-box;
			}
			.sapMTimePickerSlider {
				overflow: hidden;
				height: 100%;
				box-sizing: border-box;
				.sapMTimePickerItem {
					height: 3rem;
					line-height: 3rem;
					width: 4.5rem;
					box-sizing: border-box;
				}
				.sapMTPPickerSelectionFrame {
					width: 4.5rem;
					height: 3rem;
					position: absolute;
					box-sizing: border-box;
					display: none;
				}
				& > ul {
					list-style: none;
					margin: 0;
					padding: 0;
				}
			}
			&.sapMTPSliderExpanded {
				height: 100%;
				cursor: default;
				margin: 0;
				.sapMTimePickerLabel {
					display: block;
				}
				.sapMTimePickerItemArrows {
					display: none;
				}
				.sapMTimePickerSlider {
					height: calc(100% - 2rem);
					max-height: 100%; //because of the SliderValuesN classes below
					.sapMTPPickerSelectionFrame {
						display: block;
					}
				}
				.sapMTimePickerSlider.SliderValues3 {
					height: 9rem;
				}
				.sapMTimePickerSlider.SliderValues4 {
					height: 12rem;
				}
				.sapMTimePickerSlider.SliderValues5 {
					height: 15rem;
				}
				.sapMTimePickerSlider.SliderValues6 {
					height: 18rem;
				}
				.sapMTimePickerSlider.SliderValues7 {
					height: 21rem;
				}
				.sapMTimePickerSlider.SliderValues8 {
					height: 24rem;
				}
				.sapMTimePickerSlider.SliderValues9 {
					height: 27rem;
				}
				.sapMTimePickerSlider.SliderValues10 {
					height: 30rem;
				}
				.sapMTimePickerSlider.SliderValues11 {
					height: 33rem;
				}
				.sapMTimePickerSlider.SliderValues12 {
					height: 36rem;
				}
			}
		}
	}
}

.sapMTimePickerDropDown {
	.sapMTimePickerContainer {
		.sapMTimePickerContainerLabel {
			font-size: @sapMFontHeader5Size;
			color: @sapUiCalendarColorToday;
		}
		.sapMTPColumn {
			.sapMTimePickerLabel {
				font-size: @sapMFontSmallSize;
				color: @sapUiContentLabelColor;
				text-align: center;
				vertical-align: middle;
			}
			.sapMTimePickerSlider {
				.sapMTimePickerItem {
					background: @sapUiSelected;
					border: 1px solid @sapUiListBorderColor;
					font-size: @sapMFontMediumSize;
					color: @sapUiContentContrastTextColor;
					text-align: center;
					&:hover {
						background: @sapUiHighlight;
						color: @sapUiContentContrastTextColor;
					}
					&:active {
						background: @sapUiHighlight;
						color: @sapUiContentContrastTextColor;
					}
					&:focus {
						outline: 1px dotted @sapUiContentContrastFocusColor;
						outline-offset: -3px;
					}
				}
			}
			&.sapMTPSliderExpanded {
				.sapMTimePickerSlider {
					.sapMTimePickerItem {
						background: @sapUiListBackground;
						color: @sapUiBaseText;
						border: 1px solid @sapUiListBorderColor;
						&:hover {
							background: @sapUiHighlight;
						}
						&:active {
							background: @sapUiHighlight;
							color: @sapUiContentContrastTextColor;
						}
						&:focus {
							outline: 1px dotted @sapUiContentFocusColor;
							outline-offset: -3px;
						}
					}
					.sapMTPPickerSelectionFrame {
						outline: 0.125rem solid @sapUiContentForegroundBorderColor;
						outline-offset: -0.313rem;
						&:hover {
							& + ul > li.sapMTimePickerItem.sapMTimePickerItemSelected {
								background: @sapUiHighlight;
							}
						}
						&:active {
							& + ul > li.sapMTimePickerItem.sapMTimePickerItemSelected {
								background: @sapUiSelected;
								color: @sapUiContentContrastTextColor;
							}
						}
					}
				}
			}
			&:focus {
				outline: none;
			}
		}
	}
}

/* ======================================== */
/* COMPACT MODE STYLES                      */
/* ======================================== */

.sapUiSizeCompact {
	
	/* ======================================== */
	/* TimePicker Dropdown                      */
	/* ======================================== */
	
	.sapMTimePickerDropDown {
		border-radius: 0 0 0.25rem 0.25rem !important; //Need to override this with important because of popover stronger selectors
		box-shadow: @sapUiShadowLevel1 !important; //Need to override this with important because of popover stronger selectors
		.sapMTimePickerContainer {
			min-width: 17rem;
			padding: 0.5rem;
			margin: auto;
			.sapMTPColumn {
				height: 2rem;
				.sapMTimePickerLabel {
					width: 4rem;
				}
				.sapMTimePickerSlider {
					.sapMTimePickerItem {
						height: 2rem;
						line-height: 2rem;
						width: 4rem;
						box-sizing: border-box;
					}
					.sapMTPPickerSelectionFrame {
						width: 4rem;
						height: 2rem;
					}
				}
				&.sapMTPSliderExpanded {
					height: 100%;
					cursor: default;
					margin: 0;
					.sapMTimePickerItemArrows {
						display: block;
					}
					.sapMTimePickerSlider {
						height: ~"calc(100% - 6rem)";
						max-height: ~"calc(100% - 6rem)";
					}
					.sapMTimePickerSlider.SliderValues3 {
						height: 6rem;
					}
					.sapMTimePickerSlider.SliderValues4 {
						height: 8rem;
					}
					.sapMTimePickerSlider.SliderValues5 {
						height: 10rem;
					}
					.sapMTimePickerSlider.SliderValues6 {
						height: 12rem;
					}
					.sapMTimePickerSlider.SliderValues7 {
						height: 14rem;
					}
					.sapMTimePickerSlider.SliderValues8 {
						height: 16rem;
					}
					.sapMTimePickerSlider.SliderValues9 {
						height: 18rem;
					}
					.sapMTimePickerSlider.SliderValues10 {
						height: 20rem;
					}
					.sapMTimePickerSlider.SliderValues11 {
						height: 22rem;
					}
					.sapMTimePickerSlider.SliderValues12 {
						height: 24rem;
					}
				}
			}
		}
	}
}

/* PHONE STYLES */
html.sap-phone {
	/* ======================================== */
	/* TimePicker Input Field                   */
	/* ======================================== */
	
	.sapMTimePicker {
		.sapUiIcon {
			color: @sapUiContentIconColor;
			&:focus {
				background-color: @sapUiButtonLiteHoverBackground;
				outline: 1px dotted @sapUiContentFocusColor;
				outline-offset: -1px;
			}
			&:active {
				background-color: @sapUiButtonLiteActiveBackground;
				color: @sapUiButtonActiveTextColor;
				outline: 1px dotted @sapUiContentContrastFocusColor;
			}
		}
		&.sapMTPInputActive {
			.sapMInputBaseInner {
				border: 1px solid @sapUiFieldActiveBorderColor;
			}
			.sapUiIcon {
				background-color: @sapUiToggleButtonPressedBackground;
				color: @sapUiToggleButtonPressedTextColor;
			}
		}
	}	
	
	/* ======================================== */
	/* TimePicker Dropdown                      */
	/* ======================================== */
	
	.sapMTimePickerDropDown {
		/* This centers content in landscape & portrait mode */
		.sapMDialogScrollCont {
			display: flex;
			height: 100%;
			padding: 0;
		}
		.sapMTimePickerContainer {
			max-height: 38rem; // 12 * item height + label's height
			height: 100%;
			padding: 1rem;
			box-sizing: border-box;
			margin: auto;
			text-align: center;
			&:before {
				content: '';
				display: inline-block;
				height: 100%;
				margin-right: -0.25rem;
				vertical-align: middle;
			}
			.sapMTimePickerContainerLabel {
				position: absolute;
				top: 0;
				left: 50%;
				transform: translate(-50%, 0);
				display: block;
				height: 2rem;
				line-height: 2rem;
				font-size: @sapMFontHeader5Size;
				color: @sapUiCalendarColorToday;
			}
			.sapMTPColumn {
				display: inline-block;
				height: 3rem;
				text-align: center;
				overflow: hidden;
				cursor: pointer;
				vertical-align: middle;
				box-sizing: border-box;
				.sapMTimePickerLabel {
					height: 2rem;
					width: 4.5rem;
					display: none;
					font-size: @sapMFontSmallSize;
					color: @sapUiContentLabelColor;
					text-align: center;
					vertical-align: middle;
				}
				.sapMTimePickerItemArrows {
					display: none;
				}
				.sapMTimePickerSlider {
					height: 100%;
					//for Android 4.1 - 4.3 calc is not supported, so use 100% instead
					max-height: 100%;
					overflow: hidden;
					.sapMTimePickerItem {
						height: 3rem;
						line-height: 3rem;
						width: 4.5rem;
						box-sizing: border-box;
						background: @sapUiSelected;
						border: 1px solid @sapUiListBorderColor;
						font-size: @sapMFontMediumSize;
						color: @sapUiContentContrastTextColor;
						text-align: center;
						&:active {
							background: @sapUiHighlight;
							color: @sapUiContentContrastTextColor;
						}
						&:focus {
							outline: 1px dotted @sapUiContentContrastFocusColor;
							outline-offset: -3px;
						}
					}
					.sapMTPPickerSelectionFrame {
						width: 4.5rem;
						height: 3rem;
						position: absolute;
						display: none;
						box-sizing: border-box;
					}
				}
				&.sapMTPSliderExpanded {
					height: 100%;
					cursor: default;
					.sapMTimePickerLabel {
						display: block;
					}
					.sapMTimePickerItemArrows {
						display: none;
					}
					.sapMTimePickerSlider {
						height: calc(100% - 2rem);
						//for Android 4.1 - 4.3 calc is not supported, so use 100% instead
						max-height: 100%;
						overflow: hidden;
						.sapMTimePickerItem {
							height: 3rem;
							line-height: 3rem;
							width: 4.5rem;
							box-sizing: border-box;
							background: @sapUiListBackground;
							color: @sapUiBaseText;
							border: 1px solid @sapUiListBorderColor;
							&:active {
								background: @sapUiHighlight;
								color: @sapUiContentContrastTextColor;
							}
							&:focus {
								outline: 1px dotted @sapUiContentFocusColor;
								outline-offset: -3px;
							}
						}
						.sapMTPPickerSelectionFrame {
							display: block;
							outline: 0.125rem solid @sapUiContentForegroundBorderColor;
							outline-offset: -0.313rem;
						}
					}
					.sapMTimePickerSlider.SliderValues3 {
						height: 9rem;
					}
					.sapMTimePickerSlider.SliderValues4 {
						height: 12rem;
					}
					.sapMTimePickerSlider.SliderValues5 {
						height: 15rem;
					}
					.sapMTimePickerSlider.SliderValues6 {
						height: 18rem;
					}
					.sapMTimePickerSlider.SliderValues7 {
						height: 21rem;
					}
					.sapMTimePickerSlider.SliderValues8 {
						height: 24rem;
					}
					.sapMTimePickerSlider.SliderValues9 {
						height: 27rem;
					}
					.sapMTimePickerSlider.SliderValues10 {
						height: 30rem;
					}
					.sapMTimePickerSlider.SliderValues11 {
						height: 33rem;
					}
					.sapMTimePickerSlider.SliderValues12 {
						height: 36rem;
					}
				}
				&:focus {
					outline: none;
				}
			}
		}
	}
}